@import "@/app/styles";

.Checkbox-Wrapper {
  display: flex;
  cursor: pointer;
  transition: all $transition;

  .Checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;

    & + label {
      display: inline-flex;
      align-items: center;
      user-select: none;

      svg {
        width: 15px;
        height: 15px;
        transform: translateY(-5px);
        opacity: 0;
        transition:
          opacity 0.128s ease-in-out,
          transform 0.328s ease-in-out;
      }
    }

    & + label::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      flex-grow: 0;
      border: 1px solid $color-border;
      border-radius: 4px;
      margin-right: 15px;
      transition: all $transition;
    }

    /* стили при нахождении элемента в состоянии checked */
    &:checked + label {
      & svg {
        transform: translateY(0);
        opacity: 1;
      }
    }

    &:checked + label::before {
      border-color: $color-border;
      background-color: $color-primary;
    }

    /* стили при наведении курсора на checkbox */
    &:not(:disabled):not(:checked) + label:hover::before {
      border-color: $color-primary;
    }

    /* стили для активного состояния чекбокса (при нажатии на него) */
    &:not(:disabled):active + label::before {
      background-color: $color-primary;
      border-color: $color-border;
    }

    /* стили для чекбокса, находящегося в фокусе */
    &:focus + label::before {
      //box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
    &:focus:not(:checked) + label::before {
      border-color: $color-border;
    }

    /* стили для чекбокса, находящегося в состоянии disabled */
    &:disabled + label::before {
      background-color: $color-border;
    }

    &-Label,
    &-Description {
      position: relative;
      cursor: pointer;
      transition: all $transition;
    }

    &-Icon {
      position: absolute;
      left: 2px;
    }
  }

  &:hover {
    & .Checkbox {
      border: 1px solid $color-primary;

      &-Label,
      &-Description {
        color: $color-primary;
      }
    }
  }
}
